<template>
  <div class="invest_con_wper pd-0">
    <div class="invest_con px1200">
      <div class="product_choose">
        <h2 class="product_tit clearfix">
          <em class="product_curspan fl">搜索条件</em>
          <span
            v-if="condition_result.industry.title"
            class="condition_result_btn"
            @click="conditionCancelIndustry"
          >
            {{ condition_result.industry.title }}<i class="el-icon-close condition_result_btn_cancel" />
          </span>
          <span
            v-if="condition_result.money.title"
            class="condition_result_btn"
            @click="conditionCancelMoney"
          >
            {{ condition_result.money.title }}<i class="el-icon-close condition_result_btn_cancel" />
          </span>
          <span
            v-if="condition_result.type.title"
            class="condition_result_btn"
            @click="conditionCancelType"
          >
            {{ condition_result.type.title }}<i class="el-icon-close condition_result_btn_cancel" />
          </span>
          <span
            v-if="condition_result.area.title"
            class="condition_result_btn"
            @click="conditionCancelArea"
          >
            {{ condition_result.area.title }}<i class="el-icon-close condition_result_btn_cancel" />
          </span>
          <span
            v-if="condition_result.position.title"
            class="condition_result_btn"
            @click="conditionCancelPosition"
          >
            {{ condition_result.position.title }}<i class="el-icon-close condition_result_btn_cancel" />
          </span>
          <span
            v-if="condition_result.crowd.title"
            class="condition_result_btn"
            @click="conditionCancelCrowd"
          >
            {{ condition_result.crowd.title }}<i class="el-icon-close condition_result_btn_cancel" />
          </span>
        </h2>
        <div class="product_box">
          <div class="product_list">
            <div class="invest_prochoose">
              <p v-if="industry_show">
                <span>创业行业：</span>
                <span
                  v-for="(item,index) in conditions.industry"
                  :key="index"
                  class="choose_item"
                  :class="{'inpro_cura': index === industry_index}"
                  @click="conditionSelectedIndustry(index)"
                >{{ item.title }}</span>
              </p>
              <p v-if="money_show">
                <span>投入资金：</span>
                <span
                  v-for="(item,index) in conditions.money"
                  :key="index"
                  class="choose_item"
                  :class="{'inpro_cura': index === money_index}"
                  @click="money_index = index"
                >{{ item.title }}</span>
              </p>
              <p v-if="type_show">
                <span>创业方式：</span>
                <span
                  v-for="(item,index) in conditions.type"
                  :key="index"
                  class="choose_item"
                  :class="{'inpro_cura': index === type_index}"
                  @click="type_index = index"
                >{{ item.title }}</span>
              </p>
              <p v-if="area_show">
                <span>发展地域：</span>
                <span
                  v-for="(item,index) in conditions.area"
                  :key="index"
                  class="choose_item"
                  :class="{'inpro_cura': index === area_index}"
                  @click="area_index = index"
                >{{ item.title }}</span>
              </p>
              <p v-if="position_show">
                <span>店面位置：</span>
                <span
                  v-for="(item,index) in conditions.position"
                  :key="index"
                  class="choose_item"
                  :class="{'inpro_cura': index === position_index}"
                  @click="position_index = index"
                >{{ item.title }}</span>
              </p>
              <p v-if="crowd_show">
                <span>消费对象：</span>
                <span
                  v-for="(item,index) in conditions.crowd"
                  :key="index"
                  class="choose_item"
                  :class="{'inpro_cura': index === crowd_index}"
                  @click="crowd_index = index"
                >{{ item.title }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SearchComponent',
  props: {
    conditions: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      currentPage: 1,
      condition_result: {
        industry: {},
        money: {},
        type: {},
        area: {},
        position: {},
        crowd: {}
      },
      industry_index: 0,
      money_index: 0,
      type_index: 0,
      area_index: 0,
      position_index: 0,
      crowd_index: 0,
      industry_show: true,
      money_show: true,
      type_show: true,
      area_show: true,
      position_show: true,
      crowd_show: true
    }
  },
  watch: {
    industry_index (newVal, oldVal) {
      if (newVal > 0) {
        this.industry_show = false
        this.condition_result.industry = this.conditions.industry[newVal]
      } else {
        this.condition_result.industry = {}
        this.industry_show = true
      }
      this.searchProject(this.condition_result)
    },
    money_index (newVal, oldVal) {
      if (newVal > 0) {
        this.money_show = false
        this.condition_result.money = this.conditions.money[newVal]
      } else {
        this.condition_result.money = {}
        this.money_show = true
      }
      this.searchProject(this.condition_result)
    },
    type_index (newVal, oldVal) {
      if (newVal > 0) {
        this.type_show = false
        this.condition_result.type = this.conditions.type[newVal]
      } else {
        this.condition_result.type = {}
        this.type_show = true
      }
      this.searchProject(this.condition_result)
    },
    area_index (newVal, oldVal) {
      if (newVal > 0) {
        this.area_show = false
        this.condition_result.area = this.conditions.area[newVal]
      } else {
        this.condition_result.area = {}
        this.area_show = true
      }
      this.searchProject(this.condition_result)
    },
    position_index (newVal, oldVal) {
      if (newVal > 0) {
        this.position_show = false
        this.condition_result.position = this.conditions.position[newVal]
      } else {
        this.condition_result.position = {}
        this.position_show = true
      }
      this.searchProject(this.condition_result)
    },
    crowd_index (newVal, oldVal) {
      if (newVal > 0) {
        this.crowd_show = false
        this.condition_result.crowd = this.conditions.crowd[newVal]
      } else {
        this.condition_result.crowd = {}
        this.crowd_show = true
      }
      this.searchProject(this.condition_result)
    }
  },
  mounted () {
    this.searchProject()
  },
  methods: {
    conditionSelectedIndustry (index) {
      this.industry_index = index
      this.$store.commit('setIndustry', this.conditions.industry[index]._id)
    },
    conditionCancelIndustry () {
      this.industry_index = 0
      this.industry_show = true
    },
    conditionCancelMoney () {
      this.money_index = 0
      this.money_show = true
    },
    conditionCancelType () {
      this.type_index = 0
      this.type_show = true
    },
    conditionCancelArea () {
      this.area_index = 0
      this.area_show = true
    },
    conditionCancelPosition () {
      this.position_index = 0
      this.position_show = true
    },
    conditionCancelCrowd () {
      this.crowd_index = 0
      this.crowd_show = true
    },
    searchProject (data) {
      this.$emit('query', data)
    }

  }
}
</script>
<style lang="scss" scoped>
.invest_prochoose p .choose_item {
  display: inline-block;
  padding: 5px 15px;
  color: #555;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.invest_prochoose{
  padding-bottom: 0;
  padding-top: 5px;
}
.choose_result{
  padding-left: 50px;
  font-size: 14px;
}
.condition_result_btn{
  display: inline-block;
  height: 44px;
  margin: auto 10px;
  position: relative;
  &:hover{

  }
}
.condition_result_btn_cancel{
  margin-left: 5px;
  position: absolute;
  right: -15px;
  top: 10px;
  color: red;
}
.pagination_wrapper{
  display: flex;
  justify-content: center;
}
.pd-0{
  padding-bottom: 0 !important;
}
</style>
